<template>
    <view>
        <cu-custom bgColor="bgmain" :isBack="true">
            <view slot="content">接单大厅</view>
        </cu-custom>
        <view class="container">
            <view class="modal" v-if="getUseInfo">
                <view class="m_box tc">
                    <view class="title">提示</view>
                    <view class="fs30 p20">请先开启用户授权</view>
                    <view class="border_top_2">
                        <button @getuserinfo="getUsetInfo" class="m_btn" openType="getUserInfo">确定</button>
                    </view>
                </view>
            </view>
            <view class="page">
                <view class="tabBars row">
                    <view class="tabBar" :class="{cur:typeFlg==0}" @click="changeType(0)">外卖单
                        <view class="numss" v-if="nums1 > 0">{{ nums1 }}</view>
                    </view>
                    <view class="tabBar" :class="{cur:typeFlg==1}" @click="changeType(1)">跑腿单
                        <view class="numss" v-if="nums2>0">{{ nums2 }}</view>
                        
                    </view>
                </view>
                <view class="page-container">
                    <view class="left" style="margin-right:15rpx;margin-left:20rpx;">
                        <block v-for="(item,index) in timeList" :key="index">
                            <view class="time" :class="{cur:flg==index}" @click="changTime(index)">
                                {{index==0?"全部": item.time }}
                                <view class="nums all" v-if="index == 0&& item.count>0">{{ item.count }}</view>
                                <view class="nums" v-if="item.count>0&&index>0">{{ item.count }}</view>
                            </view>
                        </block>
                    </view>
                    <view class="grid flex-1 col-1 nodata" style="margin: 100rpx auto; text-align: center; width: 100%" v-if="list.length == 0">
                        <view class="padding-sm">
                            <view class="padding radius text-center light">
                                <text class="cuIcon-infofill lg text-lg" style="font-size: 50rpx"></text>
                                <view class="text-lg padding-tb-sm'">暂无数据</view>
                                <!-- <text class="cuIcon-infofill lg text-lg text-main" style='font-size:50rpx'></text>
                                    <view class="text-main">暂无数据</view> -->
                            </view>
                        </view>
                    </view>

                    <view class="block" style="width:500rpx;margin-right:10rpx;" v-if="list.length > 0">
                        <!-- <view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
                            <view class="tower-item" :class="Kitem.zIndex == 1 ? 'none' : ''" v-for="(Kitem, Kindex) in swiperList" :key="Kindex" :style="[{ '--index': Kitem.zIndex, '--left': Kitem.mLeft }]" :data-direction="direction">
                                <view class="swiper-item bg-white" style="width:300rpx;height:300rpx;">
                                    {{Kindex}}
                                </view>
                            </view>
                        </view> -->
                        <block  v-for="(items, indexs) in list" :key="indexs">
                            <view class="margin-top"></view>
                            <view class="names row" @click="tagetFlg(indexs)" v-if="typeFlg==0">{{ items.business_name }}
                                <view class="row">
                                    <view class="nums">{{  items.list.length }}</view>
                                    <view class="cuIcon-right"></view>

                                </view>
                            </view>

                            <!-- <swiper
                                :indicator-dots="list.length>1"
                                autoplay
                                circular
                                style="height:450rpx;"
                            > -->
                                <block v-for="(item,index) in items.list" :key="index" v-if="openFlg == indexs|| typeFlg==1">
                                   <!-- {{  items.business_name }} -->
                                    <!-- <swiper-item> -->
                                        <view class="box bg-white padding align-center" @tap="detail" :data-index="index" :data-id="item.id">
                                            <view class="flex align-center justify-between">
                                                <view class="text-lg text-bold text-black">{{ item._type_txt }}
                                                 {{ item.type == 3 ? "-" : "" }}
                                            {{ item.type != 4 ?
                                            (item.type == 3 ? (items.business_name || "") : "") : ""}}</view>
                                                
                                                
                                                
                                                
                                                <view style="display:flex;">
                                                    <view class="status_btn addjia" v-if="item.is_plus == 1">有加价</view>
                                                    <view class="status_btn" style="flex-shrink: 0;">{{ item._status_txt }}</view>
                                                </view>
                                    
                                            </view>
                                            <view class="time">{{ item.create_time }}</view>
                                            <view class="flex addr_box align-center">
                                                <view class="" style="width: 80%;">
                                                    <view class="flex align-center">
                                                        <view class="blue circle"></view>
                                                        <view class="addr margin-left" v-if="item.type==3">{{ items.business_address }}</view>
                                                        <view class="addr margin-left" v-else>{{ item.type != 4 ? item.qu_addres : item.remarks }}</view>
                                                    </view>
                                                    <text class="cuIcon-moreandroid" v-if="item.type != 4 || item.sh_addres != ''"></text>
                                                    <view class="flex align-center" v-if="item.type != 4 || item.sh_addres != ''">
                                                        <view class="orange circle"></view>
                                                        <view class="addr margin-left">{{ item.sh_addres }}</view>
                                                    </view>
                                                </view>
                                                <view class="text-lg text-red text-bold">￥{{ item.total }}</view>
                                            </view>
                                            <view class="flex margin-top operate_box">
                                                <view class="operate active" @click.stop="handleQd" :data-id="item.id">抢单</view>
                                            </view>
                                        </view>
        
                                    <!-- </swiper-item> -->
                                
                                </block>
                            <!-- </swiper> -->

                        </block>

                      
                    </view>
                </view>
            </view>
            <view class="cu-tabbar-height"></view>

            <view class="lsdd flex wdjd" @click="go('/gc_school/pages/mygrab/index?typeFlg' + typeFlg)">
                <view class="icon cuIcon-apps"></view>
                我的接单
            </view>
            <view class="lsdd flex" @click="go('/uni_modules/school-history/pages/grab')">
                <view class="icon cuIcon-apps"></view>
                历史订单</view>
        </view>
        <!-- <import src="/gc_school/pages/templates/footer.wxml" />
<template is="footerWx" data="{{...tabBar}}" /> -->
     </view>
</template>
<style>
    .tower-swiper .tower-item {
        transform: scale(calc(0.5 + var(--index) / 10));
        margin-left: calc(var(--left) * 100upx - 50upx);
        z-index: var(--index);
        width: 500rpx;
        background-color: #fff;
        left:30rpx;
    }
</style>
<script>
var app = getApp();
export default {
    data() {
        return {
            TabCur: 0,
            scrollLeft: 0,
            page: 1,
            type: 8,
            list: [],
            hasMoreData: false,
            getUseInfo: '',
            swiperList:[
                { },
                { },
                { },
                { },
                { },
            ],
            direction: '',
            timeList:[
               
            ],
            flg:0,
            typeFlg:0,
            openFlg:0,
            nums:0,
            nums1:0,
            nums2:0


        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
       
        this.TowerSwiper('swiperList');
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        app.globalData.util.footer(this);

    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.list=[]
        this.page=1
        this.getData();

    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    // onPullDownRefresh() {
    //     // this.pullDown.start()
    //     // this.list = []
    //     // this.page = 1
    //     // this.getData();
    // },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // if (this.hasMoreData) {
        //     this.getData();
        // } else {
        //     uni.showToast({
        //         title: '没有更多数据',
        //         icon: 'none'
        //     });
        // }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        tagetFlg(flg=0){
            this.openFlg= this.openFlg == flg?-1:flg
        },
        changTime(index){
            this.flg=index
            this.getData()
        },
        changeType(index) {
            this.typeFlg = index
            this.getData()
        },
        // towerSwiper
        // 初始化towerSwiper
        TowerSwiper(name) {
            let list = this[name];
            for (let i = 0; i < list.length; i++) {
                list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
                list[i].mLeft = i - parseInt(list.length / 2)
            }
            this.swiperList = list
        },

        // towerSwiper触摸开始
        TowerStart(e) {
            this.towerStart = e.touches[0].pageX
        },

        // towerSwiper计算方向
        TowerMove(e) {
            this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
        },

        // towerSwiper计算滚动
        TowerEnd(e) {
            let direction = this.direction;
            let list = this.swiperList;
            if (direction == 'right') {
                let mLeft = list[0].mLeft;
                let zIndex = list[0].zIndex;
                for (let i = 1; i < this.swiperList.length; i++) {
                    this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
                    this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
                }
                this.swiperList[list.length - 1].mLeft = mLeft;
                this.swiperList[list.length - 1].zIndex = zIndex;
            } else {
                let mLeft = list[list.length - 1].mLeft;
                let zIndex = list[list.length - 1].zIndex;
                for (let i = this.swiperList.length - 1; i > 0; i--) {
                    this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
                    this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
                }
                this.swiperList[0].mLeft = mLeft;
                this.swiperList[0].zIndex = zIndex;
            }
            this.direction = ""
            this.swiperList = this.swiperList
        },




        //详情跳转
        detail(e) {
            console.log(e.currentTarget.dataset);
            uni.navigateTo({
                url: '/gc_school/pages/order/detail?id=' + e.currentTarget.dataset.id
            });
        },

        async getData() {

            let res=await this.request("orders/seize_orders", {
                s_id: uni.getStorageSync('schoolId'),
                type: this.typeFlg == 0 ? 3 : this.typeFlg
            })

            this.request("orders/seize_orders", {
                s_id: uni.getStorageSync('schoolId'),
                type: 3
            }).then(res=>{
                this.nums1=res.data?.token||0
            })
            this.request("orders/seize_orders", {
                s_id: uni.getStorageSync('schoolId'),
                type: 1
            }).then(res => {
                this.nums2 = res.data?.token || 0

            })





            console.log(res.data.data);
            let timeList = res.data.data.map(item => {
                return {
                    ...item
                }
            }).filter(item=>item.time)
            this.timeList=[
                {time: "00:00-23:59",count:res.data.token },...timeList
            ]
            console.log(this.timeList);
            this.request("orders/runOrderLsts", {
                s_id: uni.getStorageSync('schoolId'),
                seize_orders_time: this.timeList[this.flg]?.time,
                type: this.typeFlg==0?3: this.typeFlg
            }).then(res=>{
                // this.nums=res.data.data.count
                if (this.typeFlg==0) {
                this.list = res.data.data.list.map(item=>{
                    return {
                        ...item,
                        list:[
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            // ...item.list,
                            ...item.list,
                        ]
                    }
                })

                } else {
                    // this.list=[
                    //     {
                    //         list: res.data.data.list
                    //     }
                    // ]
                    this.list = res.data.data.list.map(item=>{
                        return {
                            list:[item]
                        }
                    })

                }
            })
            return
            const self = this;
            app.globalData.util.request({
                url: 'orders/runOrderLst',
                data: {
                    s_id: uni.getStorageSync('schoolId'),
                    page: this.page,
					limit:10,
                },
				method:'GET',
                success(res) {
                    self.pullDown.end()
                    if (res.data.data.list.length < 10) {
                        if (res.data.data.list.length > 0) {
                            for (var i = 0; i < res.data.data.list.length; i++) {
                                var temp = res.data.data.list[i].remarks;
                                res.data.data.list[i].remarks.replace(/[0-9]*(\.[0-9]*)?/g, function (e) {
                                    var te = e;
                                    if (Number(e)) {
                                        if (e.toString().length > 3) {
                                            var d = e.substr(0, 2) + '****' + e.substr(6);
                                        } else {
                                            var d = e.substr(0, 1) + '**';
                                        }

                                        temp = temp.replace(te, d);
                                        console.log(temp);
                                    }
                                });
                                res.data.data.list[i].remarks = temp;
                            }

                            self.setData({
                                // list: self.list.concat(res.data.data.list),
                                hasMoreData: false
                            });
                        }
                    } else {
                        for (var i = 0; i < res.data.data.list.length; i++) {
                            var temp = res.data.data.list[i].remarks;
                            res.data.data.list[i].remarks.replace(/[0-9]*(\.[0-9]*)?/g, function (e) {
                                var te = e;

                                if (Number(e)) {
                                    if (e.toString().length > 3) {
                                        var d = e.substr(0, 2) + '****' + e.substr(6);
                                    } else {
                                        var d = e.substr(0, 1) + '**';
                                    }

                                    temp = temp.replace(te, d);
                                    console.log(temp);
                                }
                            });
                            res.data.data.list[i].remarks = temp;
                        }

                        self.setData({
                            list: self.list.concat(res.data.data.list),
                            hasMoreData: true,
                            page: self.page + 1
                        });
                    } // if (this.data.page == 1) {
                    // 	self.setData({
                    // 		list: res.data.data.order
                    // 	})
                    // } else {
                    // 	for (var i = 0; i < res.data.data.list.length; i++) {
                    // 		self.setData({
                    // 			list: [
                    // 				...self.data.list,
                    // 				res.data.data.list[i]
                    // 			]
                    // 		})
                    // 	}
                    // }
                }
            },true);
        },
		handleQd(e){
            console.log(this.tips);
            this.tips.choose("成功抢单后，将不能主动取消订单，特殊原因需要取消请与发起人联系","抢单确认").then(res=>{
                if (res.code==200) {
                    console.log("抢单");
                    this.handleQde(e)
                }
            })
        },
		//抢单
		async handleQde(e) {
			console.log(e.currentTarget.dataset.id)

            //  uni.navigateTo({
            //     url: '/gc_school/pages/mygrab/index'
            // });
            // return false

            await this.dingyueChat()
			// return;
		    var that = this;
		//     uni.requestSubscribeMessage({
		//         tmplIds: [that.sysparment.template_id, that.sysparment.cancel_template_id],
		//         // 此处可填写多个模板 ID，但低版本微信不兼容只能授权一个
		//         success(res) {
		//             console.log('已授权接收订阅消息');
		//         },
		//         complete() {
		            app.globalData.util.request({
		                url: 'Orders/grab',
		                data: {
		                    o_id: e.currentTarget.dataset.id,
		                },
		                success(res) {
		                    uni.showToast({
		                        title: '抢单成功',
		                        // icon: 'none',
		                        duration: 2000,
								success() {
                                    setTimeout(() => {
                                        // uni.navigateTo({
                                        //     url: '/gc_school/pages/mygrab/index?typeFlg'+that.typeFlg
                                        // });
                                    },2000)
								}
		                    });
		                }
		            },true);
		        // }
		    // });
		},
		
        tabSelect(e) {
            this.setData({
                TabCur: e.currentTarget.dataset.id,
                scrollLeft: e.currentTarget.dataset.id * 60,
                type: e.currentTarget.dataset.index
            });
            this.setData({
                page: 1
            });
            this.getData();
        },

        getUsetInfo() {
            console.log('占位：函数 getUsetInfo 未声明');
        }
    }
};
</script>
<style lang="scss">
.page-container {
    display: flex;
}

page {
    background: #F7F5F6;
}

.content .ft {
    display: flex;
    margin-bottom: 5rpx;
}
#cuIcon-homefills {
    width: 48rpx !important;
    position: relative !important;
    display: block !important;
    height: 48rpx !important;
    margin: 0 auto 10rpx !important;
    text-align: center !important;
    font-size: 40rpx !important;
}
#cuIcon-homefillt {
    width: 72rpx !important;
    position: absolute !important;
    display: block !important;
    height: 72rpx !important;
    margin: 0 auto 10rpx !important;
    text-align: center !important;
    font-size: 40rpx !important;
    top: 0;
    left: 0;
}
.indedx {
    color: #010101;
    font-size: 22rpx;
    padding: 10rpx 0 10rpx 0;
}
.indedxs {
    color: #12a6ee;
    font-size: 22rpx;
    margin-top: 10rpx;
    padding: -1rpx 0 10rpx 0;
    box-sizing: border-box;
}
.indedxt {
    color: #010101;
    font-size: 22rpx;
    padding: 10rpx 0 10rpx 0;
}

.text-gray,
.line-gray,
.lines-gray {
    color: #e7e7e7 !important;
}
.text-white {
    color: #ff6344;
}
.box {
    /* box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); */
    margin: 30rpx 0;
    border-radius: 10rpx;
    position: relative;
}
.cu-tags {
    color: #ff6444;
    background: #fbf6f2;
}
.addjia{
    background:  #ff6444 !important;
    color: #fbf6f2 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 100rpx;
    // border-radius: 200rpx;
    margin-right: 20rpx;
}
.type_icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
}
.text-xl {
    color: #00bc6a;
    font-weight: bold;
}
.ft {
    margin-left: 50rpx;
}
.bg-del {
    /* background: white; */
    border: 1px solid #999999;
}
.margin-top-sm .cu-tag {
    padding: 20rpx;
}
.bg-yellows {
    border: 1px solid #ff6344;
    background: white;
    color: #ff6344;
}
.cu-btn {
    font-size: 26rpx;
}
.cu-btn:not([class*='bg-']) {
    background-color: white;
}
.text-cut {
    max-width: 400rpx;
}
.status_btn{
	background-color: #FEF5F5;
	color: #FF4C4D;
	font-size: 24rpx;
	width: 100rpx;
	text-align: center;
	padding: 10rpx 0;
	border-radius: 20rpx;
}
.time{
	color: #666666;
	font-size: 26rpx;
	margin-top: 10rpx;
}
.addr_box{
	background-color: #F9F9F9;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-top: 20rpx;
}
.addr{
	font-size: 30rpx;
	font-weight: bold;
}
.circle{
	border: 6rpx solid #3792F5;
	background-color: white;
	width: 22rpx;
	height: 22rpx;
	border-radius: 50%;
	flex-shrink: 0;
}
.bule{
	border: 6rpx solid #3792F5;
}
.orange{
	border: 6rpx solid #FB4119;
}
.cuIcon-moreandroid{
	margin-left: -5rpx;
	color: grey;
}
.operate_box{
	.operate:first-child
	{
		margin-left: auto;
	}
}
.operate{
	border: 1rpx solid #E5E5E5;
	padding: 10rpx 30rpx;
	border-radius: 28rpx;
	color: #323232;
	// margin-left: auto;
}
.active{
	background-color: #FF4C4D;
	border: none;
	color: white;
}
@import "./main.scss";
</style>
